<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0;
        }
        div{
            box-sizing: border-box;
        }
        .top{
            background:#18bebe url("images/logo.png") no-repeat center center;
            height:72px;
        }
        a{
            text-decoration:none;
            color:#666;
        }
        .container{
            margin-right: auto;
            margin-left: auto;
            width: 1000px;
        }
        image{
            margin-left: auto;
            margin-right: auto;
            height:70px;
            width:30px;
        }
        .nav{
            line-height:70px;
            text-align:left;
            background:#e5e4e6; 
        }
        .nav-wrap{
            margin-top: 20px;
            background:#e5e4e6;
        }
        .nav-wrap a{
            margin-top:10px;
            display: inline-block;
            margin-left:10px;
            margin-right:10px;
            border:2px solid #ebebeb;
        }
        .nav-wrap .clarify{
            color:#18bebe;
        }
        .nav-wrap a:hover{
            background: #fff;
            border-color:#ffa700;
        }
        .nav-wrap .last{
            margin-bottom:10px;
        }
        div{
            box-sizing: border-box;
        }
        .parent .child{
            float:left;
            width: 240px;
            height:350px;
            border:1px solid #333;
            margin-right:13.3333px;
            }
        .parent .last{
            float:left;
            width: 240px;
            height:350px;
            border:1px solid #333;
            }
        img{
            margin-top:10px;
            margin-left:10px;
            margin-right:10px;
        }
        .child p{
            margin-bottom: 10px;
        }
        .last p{
            margin-bottom: 10px;
        }
        .parents{
            width:1000px;
            overflow:hidden;
            margin-left: auto;
            margin-right:auto;
        }
        .parents>div{
            width:238px;border:1px solid red;
        }
        input{
            width:28px;
            height:34px;
        }
        button:hover{
            color:#ebebeb;
            background: #ffa700;
            cursor:pointer;
        }
        .rate{
            color:#18bebe;
            font-size: 15px;
        }
        p{
            text-align: center;
        }
        p:hover{
            color: #ffa700;
            cursor: pointer;
        }
        .footer{
            height:20px;
        }
        .row:after{
            display:block;
            content:"";
            clear:both;
        }
        .footer{
            height:100px;
            background: #e5e4e6;
        }
        .one{
            height:50px;
            float:left;
        }
        .two{
            width: 500px;
            height:50px;
            float: left;
            text-align:left;
            margin:10px;
        }
        .two>.adverse>.connect{
            color: #18bebe;
        }
        .bottom{
            background: #666;
            height: 222px;
        }
        .bottom-wrap{
            width:1004px;
            height:220px;
            margin-left:auto;
            margin-right:auto;
            background:#666;
        }
        .bottom-wrap>div{
            width:250px;
            height:222px;
            border:1px solid #666;
            float:left;
        }
        h6{
            font-weight:lighter;
            color:white;
        }
        ul{
            list-style:none;
        }
        .A{
            padding:50px 50px 50px 50px ; 
        }
        .B,.C{
            text-align: center;
            padding:80px 80px 80px 80px;
        }
        .D{
            padding:50px 50px 50px 50px ;
        }
        li{
            height:50px;
        }
        </style>
</head>
<body>
    <div class="top"></div>
    <div class="container">
        <div class="nav">
            <a href="#">首页</a>
            <span>></span>
            <a href="#">预防污染</a>
            <span>></span>
            <a href="#">材料库</a>
        </div>
    <div class="nav-wrap">
            <div>
                <a href="#" class="clarify">类别</a>
                <a href="#">全部</a>
                <a href="#">地板</a>
                <a href="#">涂料</a>
                <a href="#">墙纸</a>
                <a href="#">瓷砖</a>
                <a href="#">粘胶剂</a>
                <a href="#">油漆</a>
                <a href="#">家具</a>
                <a href="#">板材</a>
                <a href="#">饰品</a>
            </div>
            <div>
                <a href="#" class="clarify">类型</a>
                <a href="#">全部</a>
            </div>
            <div>
                <a href="#" class="clarify">材质</a>
                <a href="#">全部</a>
                <a href="#">实木</a>
                <a href="#">复合</a>
                <a href="#">强化</a>
                <a href="#">其他</a>
            </div>
            <div class="last">
                <a href="#" class="clarify">品牌</a>
                <a href="#">圣象</a>
                <a href="#">大自然</a>
                <a href="#">生活家</a>
                <a href="#">北美枫情</a>
                <a href="#">德尔</a>
                <a href="#">博典</a>
                <a href="#">船王</a>
            </div>
            <div class="parent">
                <div class="child">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3005</p>
                    <p>木地板-复合地板</p>
                    <p>128元/m^2</p>
                    <p class="rate">环保评级：B （可以使用）</p>
                </div>
                <div class="child">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3005</p>
                    <p>木地板-复合地板</p>
                    <p>128元/m^2</p>
                    <p class="rate">环保评级：B （可以使用）</p>
                </div>
                <div class="child">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3005</p>
                    <p>木地板-复合地板</p>
                    <p>128元/m^2</p>
                    <p class="rate">环保评级：B （可以使用）</p>
                </div>
                <div class="last">
                    <img src="images/data_image.png" alt="">
                    <p>德尔 都市系列3005</p>
                    <p>木地板-复合地板</p>
                    <p>128元/m^2</p>
                    <p class="rate">环保评级：B （可以使用）</p>
                </div>
            <div class="parent">
                <div class="child">
                <img src="images/data_image.png" alt="">
                <p>德尔 都市系列3005</p>
                <p>木地板-复合地板</p>
                <p>128元/m^2</p>
                <p class="rate">环保评级：B （可以使用）</p>
                </div>
                <div class="child">
                <img src="images/data_image.png" alt="">
                <p>德尔 都市系列3005</p>
                <p>木地板-复合地板</p>
                <p>128元/m^2</p>
                <p class="rate">环保评级：B （可以使用）</p>
                </div>
                <div class="child">
                <img src="images/data_image.png" alt="">
                <p>德尔 都市系列3005</p>
                <p>木地板-复合地板</p>
                <p>128元/m^2</p>
                <p class="rate">环保评级：B （可以使用）</p>
                </div>
                <div class="last">
                <img src="images/data_image.png" alt="">
                <p>德尔 都市系列3005</p>
                <p>木地板-复合地板</p>
                <p>128元/m^2</p>
                <p class="rate">环保评级：B （可以使用）</p>
                </div>
            </div>
            </div>
        <div>
            <button>上一页</button>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <button>下一页</button>
            <span>共有十页，去第<input type="text">页</span><button>确定</button>
        </div>
        
    </div>
    <div class="footer row">
            <div class="one">
                <img src="images/small_weixin.png" alt="">
            </div>
            <div class="two">
                <span class="advice">建材检测 需求反馈</span><br>
                <span>亲爱的用户，我们正在不断完善和更新建材库</span><br>
                <span>若没有找到您想要的材料信息，请您想测的建材告诉我们</span><br>
            </div>
    </div>
    </div>
    <div class="bottom">
        <div class="bottom-wrap">
            <div class="A">
                <img src="images/footerLogo.png" alt=""><br>
                <h6>为室内环境健康把好每一关</h6>
                <h6>家居医生致力于中国人的家居健康问题，通过专业的技术研究和测评，倾力协助大众打造，环保的人居生活环境</h6>
            </div>
            <div class="B">
                <ul>
                    <li><h6>关于我们</h6></li>
                    <li><h6>联系我们</h6></li>
                    <li><h6>加入我们</h6></li>
                </ul>
            </div>
            <div  class="C">
                <ul>
                    <li><h6>版权说明</h6></li>
                    <li><h6>用户隐私</h6></li>
                    <li><h6>免费申明</h6></li>
                </ul>
            </div>
            <div class="D"> 
                <ul>
                    <li><img src="images/weixin2.png" alt=""><h6>官方微信</h6></li>
                    <li><img src="images/tianmao.png" alt=""><h6>天猫旗舰店</h6></li>
                    <li><img src="images/shop.png" alt=""><h6>有赞商城</h6></li>
                </ul> 
            </div>
        </div>
    </div>
</body>
</html>